<template>
  <div class="saying" @click="changeSaying">
    <section class="contentarea">
      <h1>{{ title }}</h1>
      <br />
      <span class="oringinTitle">————{{ content }} </span>
      <!-- <p><span class="oneSent" v-for="(item, index) in content" :key="index">{{item}}</span></p> -->
    </section>
  </div>
</template>
<script>
const jinrishici = require("jinrishici")
export default {
  name: "perSaying",
  data() {
    return {
      title: "",
      content: "",
      entir: ""
    }
  },
  created() {
    jinrishici.load((result) => {
      this.title = result.data.content
      this.content = result.data.origin.title
    })
  },
  methods: {
    changeSaying() {
      jinrishici.load((result) => {
        this.$data.title = result.data.content
        this.$data.content = result.data.origin.title
      })
    }
  }
}
</script>
<style lang="less" scoped>
.saying {
  cursor: pointer;
  height: 100%;
  text-align: center;
  align-items: flex-end;
  position: relative;
  margin: 0 auto;
  background-image: url("https://s1-lc.thelarkcloud.com/obj/larkcloud-mgcloud/baas/qc4nsi/1b7d6c7f3261751b_1629638459717.png");
  background-position: bottom;
  background-size: 100%;
  background-repeat: no-repeat;
  .contentarea {
    display: block;
    top: 30%;
    position: relative;
    line-height: 2rem;
    font-size: 10px;
  }
}
</style>
